<template>
  <div>
    <Editor
      @on-created="onCreated"
      @on-destroyed="onDestroyed"
    />
  </div>
</template>

<script setup>
import { Editor } from '@wangeditor/editor-for-vue'

// 定义 props
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

// 响应式变量
const editor = ref(null)

// 监听 content 变化
watch(() => props.content, (newVal) => {
  if (editor.value) editor.value.setHtml(newVal)
})

// 编辑器创建完成时的回调
const onCreated = (editorInstance) => {
  editor.value = Object.seal(editorInstance) // 一定要用 Object.seal() ，否则会报错
  editor.value.setHtml(props.content)
  editorInstance.disable()
}

// 编辑器销毁时的回调
const onDestroyed = (editorInstance) => {
  editorInstance.destroy()
  editor.value = null
}
</script>
